import { FC, useState, useEffect } from "react"

const Effect2th: FC<{}> = () => {
    let [data, setData] = useState<Array<any>>([]);
    let [flag, setFlag] = useState<boolean>(false)
    //异步请求属于副作用
    //useEffect的第二个参数叫做依赖项
    //第二个参数添加空数组 空依赖 那么可以当成componentDidMount来使用
    useEffect(() => {
        fetch('http://chst.vip/data/index.json')
            .then(body => body.json())
            .then(res => {
                console.log(res)
                setData(res.data)
            })
    }, [flag]) //flag发生变化 useEffect中的回调函数就会重新执行

    //不同的负效应逻辑不应该只放在一个effect 应该放到多个effect中

    useEffect(() => {
        document.getElementById('l')!.style.color = 'deeppink'
    }, [])

    let lis = data.map((item: any) => {
        return (
            <li key={item.id}>{item.title}</li>
        )
    })

    const handleClick = () => {
        setFlag(!flag)
    }

    return (
        <fieldset>
            <legend id="l">effect第二个参数</legend>
            <ul>
                {lis}
            </ul>
            <button onClick={handleClick}>重新发送请求</button>
        </fieldset>
    )
}

export default Effect2th